<template>
  <div>
    <el-drawer
      title="字典设置"
      size="40%"
      :visible.sync="drawerVisible">
      <el-row :gutter="10" class="mb8">
        <el-table
          v-if="refreshTable"
          v-loading="loading"
          :data="panelList"
          row-key="id"
          :default-expand-all="isExpandAll"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column label="名称" align="center" prop="label">
            <template #default="scope">
              <el-tooltip v-if="scope.row.parentId !== '0' && scope.row.description" :content="scope.row.description" placement="top">
                <span style="color: #1890ff; cursor: pointer;">
                  {{ scope.row.label }}
                </span>
              </el-tooltip>
              <span v-else>{{scope.row.label}}</span>
            </template>
          </el-table-column>
          <el-table-column label="键值" align="center" prop="value"/>
          <el-table-column label="排序" width="100" prop="sort">
            <template slot-scope="scope">
              <el-input v-if="scope.row.parentId !== '0'" v-model="scope.row.sort" type="number" @blur="handleUpdateSort(scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handlePanelEdit(scope.row)"
              >编辑
              </el-button>
              <el-button
                v-if="scope.row.parentId === '0'"
                size="mini"
                type="text"
                icon="el-icon-plus"
                @click="handlePanelAdd(scope.row)"
              >添加
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                style="color: red"
                v-if="scope.row.parentId !== '0'"
                @click="handlePanelDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-drawer>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="show" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col>
            <el-form-item label="名称" prop="label">
              <el-input v-model="form.label" placeholder="" maxlength="15" show-word-limit/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="childrenVisible">
          <el-col>
            <el-form-item label="键值" prop="value">
              <el-input v-model="form.value" placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="childrenVisible">
          <el-col>
            <el-form-item label="字典释义" prop="description">
              <el-input v-model="form.description" type="textarea" maxlength="100" show-word-limit placeholder="解释当前字典的意义,方便他人理解"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="排序" prop="sort">
              <el-input v-model="form.sort" type="number" placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="类型" prop="type">
              <el-input v-model="form.type" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import {
    problemDictList,
    addDict,
    updateDict,
    removeDict
  } from "@/api/hawkeye/problem";

  export default {
    name: "DictDrawer",
    props: {},

    data() {
      return {
        title: '',
        show: false,
        loading: false,
        // 重新渲染表格状态
        refreshTable: true,
        // 是否展示右键菜单
        drawerVisible: false,
        // 是否展开，默认全部折叠
        isExpandAll: false,
        childrenVisible: false,
        panelList: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          label: [
            {required: true, message: "名称不能为空", trigger: "blur"}
          ],
          value: [
            {required: true, message: "名称不能为空", trigger: "blur"}
          ]
        },
      };
    },
    created() {

    },
    methods: {
      /** 查询【请填写功能名称】列表 */
      getList() {
        this.loading = true;
        problemDictList().then(res => {
          this.panelList = this.handleTree(res.data, "id");
          this.loading = false;
        });
      },
      open() {
        this.drawerVisible = true
        this.getList();
      },
      /** 展开/折叠操作 */
      toggleExpandAll() {
        this.refreshTable = false;
        this.isExpandAll = !this.isExpandAll;
        this.$nextTick(() => {
          this.refreshTable = true;
        });
      },
      handlePanelEdit(row) {
        this.form = row;
        if (this.form.parentId !== "0") {
          this.childrenVisible = true;
        } else {
          this.childrenVisible = false
        }
        this.title = "编辑";
        this.show = true;
      },
      handlePanelAdd(row) {
        if (row && row.parentId === "0") {
          this.$set(this.form, 'parentId', row.id);
          this.childrenVisible = true;
        }
        this.title = "新增";
        this.$set(this.form, 'type', row.type);
        this.show = true;
      },
      handlePanelDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm(`是否确认删除名称为${row.label}的字典？`).then(function () {
          return removeDict(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
          this.$emit("submitted");
        }).catch(() => {
        });
      },
      handleUpdateSort(row) {
        updateDict(row).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.show = false;
          this.getList();
          this.$emit("submitted");
        });
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id !== undefined) {
              updateDict(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.show = false;
                this.getList();
                this.$emit("submitted");
              });
            } else {
              addDict(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.show = false;
                this.getList();
                this.$emit("submitted");
              });
            }
          }
        });
      },
      // 取消按钮
      cancel() {
        this.show = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
      },
    }
  };
</script>
<style>

</style>
